﻿import React from 'react'
import ReactDOM from 'react-dom'
import mirror, { actions, connect, Link } from 'mirrorx'
import { createForm } from 'rc-form'
import { List, InputItem, Flex } from 'antd-mobile'
import {API} from '../api'

import { FormattedMessage } from 'react-intl'

class App extends React.Component {
  constructor (props) {
	super(props)
    this.state = {
		  PolicyModel :{
        orderNo: T.urlQuery('orderNo'),
	      surrenderNo:T.urlQuery('surrenderNo')
      }
    }
  }

  componentDidMount () {

  }

  submitSurrener =()=> {
    this.props.form.validateFields((error,values) => {
      //添加参数 订单号 退保单号
      const submitModel = Object.assign(this.state.PolicyModel,values)
      //提交信息
      const submitSurDTO = T.fetch2({
          url: API.preSumit.path,
          data: submitModel
	    })
      submitSurDTO.then((res) => {
        if (res.code == '0'){
          actions.routing.push('surrender-success')
        }
      })
    })
  }

  render () {
    const { getFieldProps } = this.props.form
    let insures = T.urlQuery('insures').split(',')
    let insuresDom = insures.map((item, index) => {
      return <span key={index}>{item}<br /></span>
    })

    return (
      <div className='surrender-payway'>
        <div className='result-head f28'>
          <div className='clearfix result-item bor-bottom'>
            <div className='fl'><FormattedMessage id='surrender_insure_type' defaultMessage='退保险种' /></div>
            <div className='fr'>{insuresDom}</div>
          </div>

          <div className='clearfix result-item bor-bottom'>
            <div className='fl'><FormattedMessage id='surrender_reason' defaultMessage='退保原因' /></div>
            <div className='fr'>{T.urlQuery('reason')}</div>
          </div>

          <div className='clearfix result-item bor-bottom'>
            <div className='fl'><FormattedMessage id='surrender_fee' defaultMessage='退保金额' /></div>
            <div className='fr'>{T.cutPrice(T.urlQuery('feeAmount'))} SGD</div>
          </div>
        </div>
        {/* <p className="pt20 pb20 ml20 bor-bottom"><FormattedMessage id='choose_method_get_money' defaultMessage='请选择您希望的收款方式'/>:</p> */}
        {/* 支付银行卡信息 改手填 */}
        <div className='pay-box'>
          <div className='bank-title'><FormattedMessage id='bank_card' defaultMessage='银行卡' /></div>
          <List>
            <InputItem labelNumber={10} {...getFieldProps('userName')} placeholder='Please input'>
              <FormattedMessage id='card_h' defaultMessage='姓名' />
            </InputItem>
            <InputItem labelNumber={10} {...getFieldProps('cardNo')} placeholder='Please input'>
              <FormattedMessage id='bank_a' defaultMessage='银行卡号' />
            </InputItem>
            <InputItem labelNumber={10} {...getFieldProps('bankCode')} placeholder='Please input'>
              <FormattedMessage id='anan_back_and_eidt' defaultMessage='开户银行' />
            </InputItem>
          </List>
        </div>
        <div className='whiteSpace' />
        <div className='footer clearfix'>
          <Flex>
            <Flex.Item className='tac pt30 pb30 fcw f28 diy_background' onClick={this.submitSurrener}><FormattedMessage id='surrender_right_now' defaultMessage='立即退保' /></Flex.Item>
          </Flex>
        </div>
      </div>
    )
  }
}

export default createForm()(App)
